﻿@{
    var shortcutMenuList = ViewBag.ShortcutMenuList as IList<Newtouch.HIS.Domain.Entity.SysShortcutMenuEntity>;
}
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="@SiteUrl.GetStaticResourceScriptUrl("~/css/framework-font.css")" rel="stylesheet" />
    <link href="@SiteUrl.GetStaticResourceScriptUrl("~/css/framework-ui.css")" rel="stylesheet" />
    <link href="@SiteUrl.GetStaticResourceScriptUrl("~/css/framework-theme.css")" rel="stylesheet" />
    <link href="@SiteUrl.GetStaticResourceScriptUrl("~/js/bootstrap/bootstrap.min.css")" rel="stylesheet" />
    <link href="@SiteUrl.GetStaticResourceScriptUrl("~/css/framework-theme.css")" rel="stylesheet" />
    <link href="@SiteUrl.GetStaticResourceScriptUrl("~/css/common.css")" rel="stylesheet" />
    @Html.Partial("_FrontReference")
    <script src="@SiteUrl.GetStaticResourceScriptUrl("~/js/highcharts/highcharts.js")"></script>
    <style>
        #copyrightcontent {
            height: 30px;
            line-height: 29px;
            overflow: hidden;
            position: absolute;
            top: 100%;
            margin-top: -30px;
            width: 100%;
            background-color: #fff;
            border: 1px solid #e6e6e6;
            padding-left: 10px;
            padding-right: 10px;
        }

        .dashboard-stats {
            float: left;
            width: 16.6%;
        }

        .dashboard-stats-item {
            position: relative;
            overflow: hidden;
            color: #fff;
            cursor: pointer;
            height: 82px; /*caishanshan*/
            margin-right: 25px;
            margin-bottom: 10px;
            padding: 20px 20px;
            text-align: center;
            margin-left: 5%;
            width: 88%;
        }

            .dashboard-stats-item .m-top-none {
                margin-top: 2px;
            }

            .dashboard-stats-item h2 {
                font-size: 35px;
                font-family: inherit;
                line-height: 1.1;
                font-weight: 500;
            }

            .dashboard-stats-item h5 {
                font-size: 14px;
                font-family: inherit;
                margin-top: 3px;
                line-height: 2;
            }


            .dashboard-stats-item .stat-icon {
                position: absolute;
                top: 10px;
                /*right: 10px;*/
                left: 4%; /*caishanshan*/
                font-size: 30px;
                /*opacity: .3;*/
            }

        .dashboard-stats i.fa.stats-icon {
            width: 50px;
            padding: 20px;
            font-size: 50px;
            text-align: center;
            color: #fff;
            height: 50px;
            border-radius: 10px;
        }

        .panel-default {
            border: none;
            border-radius: 0px;
            margin-bottom: 0px;
            box-shadow: none;
            -webkit-box-shadow: none;
        }

            .panel-default > .panel-heading {
                color: #777;
                background-color: #fff;
                border-color: #e6e6e6;
                padding: 10px 10px;
            }

            .panel-default > .panel-body {
                padding: 10px;
                padding-bottom: 0px;
            }

                .panel-default > .panel-body ul {
                    overflow: hidden;
                    padding: 0;
                    margin: 0px;
                    margin-top: -5px;
                }

                    .panel-default > .panel-body ul li {
                        line-height: 27px;
                        list-style-type: none;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }

                        .panel-default > .panel-body ul li .time {
                            color: #a1a1a1;
                            float: right;
                            padding-right: 5px;
                        }
                /* 快捷菜单 */
                .panel-body .menuItem .dashboard-stats-item {
                    border: 1px solid #e6e6e6;
                }

            .panel-body .menuItem .dashboard-stats-item .stat-count {
                margin-top: -12px;
                color: #274b6d;
                height: 10px;
                background: none repeat scroll 0 0 #f4786e;
                border-radius: 100%;
                background-clip: padding-box;
                color: #fff;
                display: block;
                font-size: 9px;
                height: 20px;
                line-height: 20px;
                position: absolute;
                right: 10px;
                text-align: center;
                width: 20px;
                position: relative;
                right: -40px;
                float: left;
            }

                .panel-body .menuItem .dashboard-stats-item .stat-count span {
                    font-size: x-small;
                }

            .panel-body .menuItem .dashboard-stats-item .menuName b {
                font-size: larger;
            }
    </style>
</head>
<body>
    <div id="areascontent">
        <div class="rows" style="margin-bottom: 1%; border: 1px solid #e6e6e6; overflow: hidden; padding-left: 1px;">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <i class="fa fa-line-chart fa-lg" style="padding-right: 5px;"></i>快捷菜单
                </div>
                <div class="panel-body" style="width:100%;">
                    @if (shortcutMenuList != null && shortcutMenuList.Count > 0)
                    {
                        foreach (var item in shortcutMenuList)
                        {
                            <a class="menuItem" data-Code="@(item.Code)" href="@(item.UrlAddress)">
                                <div class="dashboard-stats">
                                    <div class="dashboard-stats-item">
                                        <div class="stat-icon">
                                            <img src="@(item.ImgPath)" />
                                        </div>
                                        <h6 class="menuName"><b>@(item.Name)</b></h6>
                                    </div>
                                </div>
                            </a>
                        }
                    }
                </div>
            </div>
        </div>
        <div class="rows" style="margin-bottom: 1%; overflow: hidden;">
            <div style="float: left; width: 69%;">
                <div style="height: 350px; border: 1px solid #e6e6e6; background-color: #fff;">
                    <div id="personcntchart" style="height: 350px; width: 100%; padding-right: 10px;"></div>
                    <div id="monthcntchart" style="height: 350px; width: 100%; padding-right: 10px;display:none"></div>
                </div>
                <input class="form-control btn btn-default" id="reset" type="button" value="按周" style="width: 50px;height: 25px;position: relative;top: -30px;right: -730px;">
            </div>
            <div style="float: right; width: 30%;">
                <div style="height: 350px; border: 1px solid #e6e6e6; background-color: #fff;">
                    <div class="panel panel-default">
                        <div id="leavechart" style="height: 350px; width: 100%;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(function () {
            LoadChart();
            $('.menuItem').on('click', window.parent.$.Newtouchtab.addTab);
        });

        $('#reset').click(function () {
            var $this = $(this).val();
            if ($this == "按周") {
                $('#personcntchart').css("display", "none");
                $('#monthcntchart').css("display", "block");
                LoadMonthChart();
                $(this).val("按年");
            } else {
                $('#personcntchart').css("display", "block");
                $('#monthcntchart').css("display", "none");
                $(this).val("按周");
            }
        });

        function LoadChart() {
            $.ajax({
                url: "/Home/GetVisitNum?r=" + Math.random(),
                dataType: "json",
                async: false,
                success: function (data) {
                    if (data != null && data.data != null
                        && data.data.OutpatientList != null
                        && data.data.InpatientList != null) {
                        GetSalaryChart(data.data);
                        GetLeaveChart(data.data);
                    }
                }
            });
        }

        function GetSalaryChart(data) {
            //var randomScalingFactor = function () { return Math.round(Math.random() * 100) };
            var OutpatientList = [];
            var InpatientList = [];
            //折线图 获取就诊人数
            if (data) {
                OutpatientList = data.OutpatientList;
                InpatientList = data.InpatientList
            } else {
                for (var i = 0; i < 12; i++) {
                    OutpatientList.push([0]);
                    InpatientList.push([0]);
                }
            }
            $('#personcntchart').highcharts({
                chart: {
                    zoomType: 'none'
                },
                title: {
                    text: '就诊人数/在院人数'
                },
                xAxis: {
                    categories: [
                        '一月',
                        '二月',
                        '三月',
                        '四月',
                        '五月',
                        '六月',
                        '七月',
                        '八月',
                        '九月',
                        '十月',
                        '十一月',
                        '十二月'
                    ]
                },
                yAxis: {
                    title: {
                        text: '单位 (人)'
                    }
                },
                tooltip: {
                    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y}人</b></td></tr>',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    }
                },
                series: [{
                    name: "门诊",
                    color: '#999EFF',
                    data: [
                            OutpatientList[0].num, OutpatientList[1].num, OutpatientList[2].num, OutpatientList[3].num, OutpatientList[4].num, OutpatientList[5].num, OutpatientList[6].num, OutpatientList[7].num, OutpatientList[8].num, OutpatientList[9].num, OutpatientList[10].num, OutpatientList[11].num
                    ]
                }, {
                    name: "住院",
                    color: '#FFBC75',
                    data: [
                               InpatientList[0].num, InpatientList[1].num, InpatientList[2].num, InpatientList[3].num, InpatientList[4].num, InpatientList[5].num, InpatientList[6].num, InpatientList[7].num, InpatientList[8].num, InpatientList[9].num, InpatientList[10].num, InpatientList[11].num
                        ]
                }]
            });
        }

        function GetLeaveChart(data) {
            //var randomScalingFactor = function () { return Math.round(Math.random() * 100) };
            //饼状图 获取就诊人数
            var outpatientCount = 0;
            var inpatientCount = 0;
            if (data.OutpatientList != null) {
                for (var i = 0; i < data.OutpatientList.length; i++) {
                    outpatientCount += data.OutpatientList[i].num;
                }
            }
            if (data.zyrs != null) {
                inpatientCount = data.zyrs;
            }

            $('#leavechart').highcharts({
                chart: {
                    type: 'pie'
                },
                colors: ['#999EFF', '#FFBC75'],
                title: {
                    text: '就诊类别统计'
                },
                tooltip: {
                    headerFormat: '',
                    pointFormat: '{point.name}: <b>{point.y}人</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.y}人',
                            style: {
                                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                            }
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    data: [
                        ['门诊', outpatientCount],
                        ['住院', inpatientCount]
                    ]
                }]
            });

        }

        function LoadMonthChart() {
            $.ajax({
                url: "/Home/GetWeekNum?r=" + Math.random(),
                dataType: "json",
                async: false,
                success: function (data) {
                    if (data != null && data.data != null
                        && data.data.OutpatientList != null
                        && data.data.InpatientList != null) {
                        GetMonthNumChart(data.data);
                    }
                }
            });
        }

        function GetMonthNumChart(data) {
            var rtnobj = {};
            rtnobj.str = [];
            rtnobj.dataoutpatient = [];
            rtnobj.datainpatient = [];
            $.ajax({
                url: "/Home/GetLastWeek?r=" + Math.random(),
                dataType: "json",
                async: false,
                success: function (lastdata) {
                    if (lastdata != null) {
                        for (var i = 0; i < lastdata.length; i++) {
                            rtnobj.str.push(lastdata[i].wbegin.substring(5, 10) + "至" + (lastdata[i].wend).substring(5, 10));
                            var isOutpatientPush = false;
                            $.each(data.OutpatientList, function (ii, v) {
                                if (v.wbegin == lastdata[i].wbegin && v.wend == lastdata[i].wend) {
                                    rtnobj.dataoutpatient.push(v.num);
                                    isOutpatientPush = true;
                                }
                            });
                            if (!isOutpatientPush) {
                                rtnobj.dataoutpatient.push(0);
                            }
                        }
                        $.each(data.InpatientList, function (i, v) {
                            if (v.wbegin == lastdata[i].wbegin && v.wend == lastdata[i].wend) {
                                rtnobj.datainpatient.push(v.num);
                            }
                        });
                        loadmonthcharts(rtnobj);
                    }
                }
            });
        }

        function loadmonthcharts(rtnobj) {
            $('#monthcntchart').highcharts({
                chart: {
                    zoomType: 'none'
                },
                title: {
                    text: '就诊人数/在院人数'
                },
                subtitle: {
                    text: new Date().getFullYear() + "年最近10周人数统计",
                },
                xAxis: {
                    categories: rtnobj.str,
                    labels: {
                        rotation: 10, //倾斜的角度
                    }
                },
                yAxis: {
                    title: {
                        text: '单位 (人)'
                    }
                },
                tooltip: {
                    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                        '<td style="padding:0"><b>{point.y}人</b></td></tr>',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    }
                },
                series: [{
                    name: "门诊",
                    color: '#999EFF',
                    data: rtnobj.dataoutpatient
                }, {
                    name: "住院",
                    color: '#FFBC75',
                    data: rtnobj.datainpatient
                }
                ]
            });
        }
    </script>
</body>
</html>
